<template>
  <el-row type="flex" justify="center" :gutter="12">
    <el-col :span="6">
      <ProjectList
        @updateCurrProject="updateCurrentProjectId">
      </ProjectList>
    </el-col>
    <el-col :span="18">
      <!-- 仪表盘基容器 -->
      <ProjectDashboard
        :project-id="projectId"
        :project-name="projectName"
      ></ProjectDashboard>
    </el-col>
  </el-row>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import ProjectList from '@/components/ProjectList'
import ProjectDashboard from '@/components/ProjectDashboard'

export default {
  name: 'Dashboard',
  components: {
    Header,
    Footer,
    ProjectList,
    ProjectDashboard
  },
  data () {
    return {
      msg: '用户主页',
      currentProjectId: this.$store.getters.currentProject ? this.$store.getters.currentProject : undefined,
      currentProjectName: undefined
    }
  },
  computed: {
    projectId () {
      return this.currentProjectId
    },
    projectName () {
      return this.currentProjectName
    }
  },
  created () {
    this.$store.dispatch('SetCurrentMenu', '工作台')
  },
  methods: {
    updateCurrentProjectId (projectId, projectName) {
      this.currentProjectId = projectId
      this.currentProjectName = projectName
    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  min-height: calc(100vh - 200px);
  margin-top: 30px;
}
.el-card {
  border: 1px solid #d9dce2;
}
.el-container {
  min-width: 1400px;
}
</style>
